<template>

	<view class="">
		<view>
			<view class="top">
				<image style="width: 100%;height: 350px;" :src="detailInfo.imageUrl"
					@click="toPreviewImg(detailInfo.imageUrl)"></image>
			</view>
			<unisection title="商品介绍" type="line"></unisection>
			<view style="color: #222;margin: 20rpx 0 20rpx 25rpx;font-size: 30rpx;font-weight: 600;">{{detailInfo.name}}
			</view>
			<view style="color: #ff0000;margin: 20rpx;font-size: 30rpx;font-weight: 600;">￥{{detailInfo.price}}
			</view>
			<!-- <view style="color: #999999;margin: 20rpx;font-size: 30rpx;">{{"存库："+detailInfo.quantity}}</view> -->
			<!-- <rich-text :nodes="content"></rich-text> -->
			<unisection title="商品规格" type="line" bold></unisection>
			<!-- 			<view style="color: #999999;margin: 20rpx;font-size: 30rpx;">{{"状态："+detailInfo.status}}</view>
			<view style="color: #999999;margin: 20rpx;font-size: 30rpx;">{{"规格："+detailInfo.type}}</view> -->
			<view style="color: #999999;margin: 20rpx;font-size: 26rpx;">{{"库存："+detailInfo.stock}}</view>
			<!-- 	<view style="margin-left: 20rpx;">
				<uni-number-box :min="1" :max="999" :value="quan" @change="myquan($event)"></uni-number-box>
			</view> -->
			<block v-if="detailInfo.description">
				<unisection title="商品详情" type="line" bold></unisection>
				<view style="color: #999999;margin: 20rpx;font-size: 30rpx;">
					{{"内容："+detailInfo.description ?detailInfo.description :''}}
				</view>
			</block>

		</view>

		<unisection title="商品详情图" type="line"></unisection>
		<image style="width: 100%;height: 350px;" :src="detailInfo.imageUrl" @click="toPreviewImg(detailInfo.imageUrl)">
		</image>
		<view class="isbottom">
		</view>
		<view>
			<uniGoodsNav class="isbutto" :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	//引入
	import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
	import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue'
	import unisection from '@/components/goo-section/goo-section.vue'
	import {
		uniList,
		uniListItem,
		uniListChat
	} from '@dcloudio/uni-ui';
	import {
		getProductListApi,
		productPaymentApi,
		productPaymentH5Api,
		productPaymentAppApi
	} from '@/api/index.js';
	export default {
		data() {
			return {
				quan: 1, //初始数量
				quan1: 0, //最终数量
				options: [
					// 	{
					// 	icon: 'headphones',
					// 	text: '客服'
					// }, {
					// 	icon: 'cart',
					// 	text: '购物车',
					// 	//info: 2
					// },
				],
				buttonGroup: [{
					text: '立即购买',
					backgroundColor: '#FF2C3C',
					color: '#fff'
				}],
			}
		},
		components: {
			uniGoodsNav,
			uniNumberBox,
			unisection
		},
		onLoad(options) {
			console.log(options, 'options');
			const shopDetail = uni.getStorageSync('shopDetail');
			if (shopDetail) {
				this.detailInfo = shopDetail;
				console.log(this.detailInfo, 'this.detailInfo');
			}
		},
		methods: {
			// 购买商品
			async toBuy(item) {
				console.log(item, 'item');
				// #ifdef APP
				let api = productPaymentAppApi
				// #endif
				// #ifdef H5
				let api = productPaymentH5Api
				// #endif
				const res = await api({
					userId: uni.getStorageSync('UserInfo').userId,
					productId: item.id,
					quantity: 1,
					totalAmount: item.price
				})
				if (res.code === 200) {
					console.log(res.data.body, 'res.data.body');
					// return
					// #ifdef H5
					uni.setStorageSync('alipaFrom', res.data.body);
					uni.navigateTo({
						url: '/pages/alipaFrom/alipaFrom'
					})
					// #endif
					// #ifdef APP
					uni.requestPayment({
						"provider": "alipay", //固定值为"alipay"
						"orderInfo": res.data.body, //此处为后端返回的订单信息字符串
						success: function(res) {
							var rawdata = JSON.parse(res.rawdata);
							console.log("支付成功");
							uni.showModal({
								title: '支付成功',
								content: rawdata
							})
						},
						fail: function(err) {
							uni.showModal({
								title: '失败了',
								content: JSON.stringify(err)
							})
							console.log('支付失败:' + JSON.stringify(err));
						}
					});
					// #endif
					// this.$modal.showToast('购买成功~')
				}
			},
			toPreviewImg(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			//存取數量
			myquan(e) {
				console.log(e)
				this.quan1 = e
			},
			//左侧
			onClick(e) {
				switch (e.index) {
					case 0:
						//客服
						break
					case 1:
						//购物车
						break
				}
			},
			//右侧
			buttonClick(e) {
				switch (e.index) {
					case 0:
						this.toBuy(this.detailInfo);
						break
					case 1:
						this.orno();
						break
				}
			},
			//确认下单
			orno() {
				var thit = this
				uni.showModal({
					title: '提示',
					content: '确认下单',
					success: function(res) {
						if (res.confirm) {
							thit.getwxid();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//下单
			getwxid() {
				uni.showToast({
					title: '下单成功',
					duration: 2000
				});
			},
			mycat() {
				uni.showToast({
					title: '加入购物车成功',
					duration: 2000
				});
			}

		}
	}
</script>

<style lang="scss">
	.top {
		image {
			width: 100%;
			height: 100%;
		}
	}

	.body_list {
		border-bottom: 1rpx none #3B4144;
		margin-bottom: 40rpx;
		margin-top: 40rpx;
	}

	.body_list_1 {
		margin-left: 40rpx;
		margin-bottom: 40rpx;
		font-size: 35rpx;
	}

	.hot_goods {
		background: #eee;
		overflow: hidden;

		.tit {
			height: 50px;
			line-height: 50px;
			color: #b50e03;
			text-align: center;
			letter-spacing: 20px;
			background: #fff;
			margin: 10rpx 0;
		}
	}

	.datetime {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10rpx;

		.datetime1 {
			border: 1rpx solid #3B4144;
			width: 30%;
			height: 130rpx;
			margin: 10rpx;
			text-align: center;
			border-radius: 15rpx;
			background-color: #FFFFFF;

			.datetime11 {
				text-align: center;
				font-size: 25rpx;
				position: relative;

			}
		}

		.ismycolor {
			border: 3rpx solid #AAAAAA;
			width: 30%;
			height: 130rpx;
			margin: 10rpx;
			text-align: center;
			border-radius: 15rpx;
			background-color: #E5E5E5;

			.datetime11 {
				font-size: 25rpx;
				position: relative;
				text-align: center;

				color: #AAAAAA;
			}
		}

		.mycolor {
			border: 3rpx solid #E64340;
			width: 30%;
			height: 130rpx;
			margin: 10rpx;
			text-align: center;
			border-radius: 15rpx;
			background-color: #FFFFFF;

			.datetime11 {
				font-size: 25rpx;
				position: relative;
				text-align: center;

				color: #E64340;
			}
		}
	}

	.time {
		border-top: 1rpx none #3B4144;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-top: 10rpx;

		.timenoon {
			border: 1rpx solid #3B4144;
			width: 45%;
			height: 200rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;
			border-radius: 15px;
			background-color: #FFFFFF;

			.timenoon1 {
				text-align: center;
				position: relative;
				top: 50rpx;
				margin-bottom: 20rpx;
				font-size: 40rpx;
			}
		}

		.mycolor {
			border: 1rpx solid #E64340;
			width: 45%;
			height: 200rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;
			border-radius: 15px;
			background-color: #FFFFFF;

			.timenoon1 {
				text-align: center;
				position: relative;
				top: 50rpx;
				margin-bottom: 20rpx;
				font-size: 40rpx;
				color: #E64340;
			}
		}

		.ismycolor {
			border: 1rpx solid #AAAAAA;
			width: 45%;
			height: 200rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;
			border-radius: 15px;
			background-color: #E5E5E5;

			.timenoon1 {
				text-align: center;
				position: relative;
				top: 50rpx;
				margin-bottom: 20rpx;
				font-size: 40rpx;
				color: #AAAAAA;
			}
		}
	}

	.buttionyes {
		width: 80%;
		height: 80%;
		margin: 10rpx;
		margin-left: 10%;
	}

	.isbuttionyes {
		background-color: #FFFFFF;
		text-align: center;
		width: 100%;
		position: fixed;
		bottom: 1rpx;
	}

	.isbottom {
		text-align: center;
		width: 450rpx;
		height: 100rpx;
		display: flex;
		flex-wrap: wrap;
		position: relative;
		left: 200rpx;
	}

	.list-text1 {
		width: 100%;
		height: 50upx;
		line-height: 90upx;
		font-size: 25upx;
		color: #555;
		flex: 1;
	}
</style>